<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Comparison Analysis</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="etbdefi">

<!-- Le styles -->
<link href="resources/css/bootstrap.css" rel="stylesheet">
<link href="resources/css/bootstrap-responsive.css" rel="stylesheet">
<link href="resources/css/docs.css" rel="stylesheet">
<!-- Sandip <link href="resources/js/google-code-prettify/prettify.css"	rel="stylesheet"> -->

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="assets/js/html5shiv.js"></script>
    <![endif]-->

<script src="resources/js/jquery-1.7.2.min.js"></script>
<script src="resources/js/highcharts.js"></script>
<!--        <script src="js/gray.js"></script>-->
<script src="resources/js/main.js"></script>
<script src="resources/js/validate.js"></script>
<script src="resources/js/exporting.js"></script>
<script src="resources/js/ajaxreq.js"></script>


</head>

<body data-spy="scroll" data-target=".bs-docs-sidebar">


	<!-- Subhead
================================================== -->
	<header class="jumbotron subhead" id="overview">
		<div class="container" style="margin-top: -3%;">
			<h2 style="font-family: ERICSSON CAPITAL TT; margin-left: 20%;">Ericsson
				Smart Solution</h2>
			<p class=""
				style="font-family: ERICSSON CAPITAL TT; margin-left: 20%;">Ericsson
				One Stop Solution For All Smart Devices.</p>
			<img alt="****" src="resources/img/logo.jpg"
				style="width: 7%; height: 10%; margin-top: -11%;" />
			
				<a class="brand" href="/smart-1.0.0-BUILD-SNAPSHOT/" style="font-size: 18px;margin-left: 87%;">Log
					out</a>
		
		</div>
	</header>

	<div class="container">

		<!-- Docs nav
    ================================================== -->
		<div class="row">
			<div class="span3 bs-docs-sidebar">
				<ul class="nav nav-list bs-docs-sidenav">
					<li><a href="dashboard.html"><i class="icon-chevron-right"></i>My
							Dashboard</a></li>
					<li><a onclick="showme('divdimension');" href="#"><i
							class="icon-chevron-right"></i>Consumption Analysis</a></li>
				</ul>
			</div>
			<div class="span9">
				<div id='divdimension' class="span9" style="display: none">
					<div id='reort_title_pan' class="span4">
						<p><h5>CONSUMPTION ANALYSIS COMPARISON  <p style="color:red;">(* for mandatory selection)</p></h5></p>
					</div>

					<c:set var="iteration" value="1"/>
					<c:forEach items="${firstReport.dimensionMap}" var="dimensions">
						<c:if test="${dimensions.key eq 'DIM_TIME'}">
							<c:set var="iteration" value="2" />
						</c:if>						
							<c:forEach var="loop" begin="1" end="${iteration}">
								<c:choose>
									<c:when test="${dimensions.key eq 'DIM_TIME'}">
										<c:if test="${loop eq 1}">
											<c:set var="suffix" value="_FROM"/>
										</c:if>
										<c:if test="${loop eq 2}">
											<c:set var="suffix" value="_TO"/>
										</c:if>
									</c:when>
									<c:otherwise>
										<c:set var="suffix" value=""/>
									</c:otherwise>
								</c:choose>
							<div id="${dimensions.key}${suffix}" class="span9">
								<div><div style="color:red;font-size:16px;">*</div><h5 style="padding-left: 10px;margin-top:-19px;">${dimensions.key}${suffix} :</h5></div>
								
								<c:forEach items="${dimensions.value.hierarchyLevels}" var="hierarchyLevel" varStatus="hierarchyLevelStatus">
									<c:if test="${hierarchyLevelStatus.first}">
										<select id="${hierarchyLevel}${suffix}" name="${dimensions.value.hierarchyLevels[hierarchyLevelStatus.count]}${suffix}" onchange="showGenerateButton(this.id)">
											<option value="select" selected="selected">Select...${hierarchyLevel}</option>										
											<c:forEach items="${dimensions.value.currentSetOfValues}" var="levelValues">
												<option value="${levelValues}">${levelValues}</option>
											</c:forEach>										
											</select>
									</c:if>
									<c:if test="${! hierarchyLevelStatus.first}">
										<select id="${hierarchyLevel}${suffix}" name="${dimensions.value.hierarchyLevels[hierarchyLevelStatus.count]}${suffix}" disabled onchange="showGenerateButton(this.id)">
											<option value="select" selected="selected">Select...${hierarchyLevel}</option>										
										</select>
									</c:if>								
								</c:forEach>
							</div>
						</c:forEach>						
					</c:forEach>
					<!--
					<div id='divtime' class="span9">
						<h5>DIM_TIME:...</h5>
						<select id="ddyearto" onchange="enablecombo('ddyearfrm')">
							<option value="select" selected="selected">Select Year
								To</option>
							<option value="2013">2013</option>
							<option value="2012">2012</option>
							<option value="2011">2011</option>
						</select><select id="ddyearfrm" disabled
							onchange="if ( validatecmpchart() != false ){showme('btncomprpt');}">
							<option value="select" selected="selected">Select Year
								From</option>
							<option value="2013">2013</option>
							<option value="2012">2012</option>
							<option value="2011">2011</option>
						</select>
					</div>
					<div id='divgeo' class="span9">
						<h5>DIM_GEO:...</h5>
						<select id="ddcountry" onchange="enablecombo('ddstate')">
							<option value="select" selected="selected">Select
								Country</option>
							<option value="India">India</option>
						</select> <select id="ddstate" disabled onchange="enablecombo('ddcity')">
							<option value="select" selected="selected">Select State</option>
							<option value="West Bengal">West Bengal</option>
						</select> <select id="ddcity" disabled
							onchange="if ( validatecmpchart() != false ){showme('btncomprpt');}">
							<option value="select" selected="selected">Select City</option>
							<option value="Kolkata">Kolkata</option>
						</select> <select id="ddarea" disabled onchange="enablecombo('ddsubarea')">
							<option value="select" selected="selected">Select Area</option>
							<option value="Saltlake">Saltlake</option>
							<option value="Rajarhat">Rajarhat</option>
							<option value="Behala">Behala</option>
							<option value="NewAlipur">NewAlipur</option>
							<option value="Golpark">Golpark</option>
							<option value="All">All</option>
						</select> <select id="ddsubarea" disabled
							onchange="enablecombo('ddcusttype')">
							<option value="select" selected="selected">Select
								Sub-Station</option>
							<option value="SS01">SS01</option>
							<option value="SS02">SS02</option>
							<option value="SS03">SS03</option>
							<option value="SS04">SS04</option>
							<option value="SS05">SS05</option>
							<option value="SS06">SS06</option>
							<option value="All">All</option>
						</select> <select id="ddcusttype" disabled>
							<option value="select" selected="selected">Select
								Customer Type</option>
							<option value="Commercial">Commercial</option>
							<option value="Domestic">Domestic</option>
							<option value="All">All</option>
						</select>
					</div>
					-->
					<div id='divbtn' class="span2">
						<!--<a id="btncomprpt" class="switcher" href="#" style="display: none" 
							onclick="compareReport();showme('divshowchart');defaultChartComp();">Compare Report&raquo;</a>-->
						<a id="btncomprpt" class="switcher" href="#" style="display: none" 
							onclick="compareReport();showme('divshowchart')">Compare Report&raquo;</a>
						<br>
						<p id="nev" align="left" style="display: none">
							<a class="btn" href="#" style="" onclick="alert('data_pan')">Level 0 &raquo;</a>
						</p>
					</div>
					<div id='divshowchart' class="span9" style="display: none">
						<div id="chart_1" class="chart"></div>
					</div>
				</div>
			</div>
		</div>
	</div>



	<!-- Footer
    ================================================== -->
	<!--  <footer class="footer">
      <div class="container">
        <p>Designed and built with all the love in the world </p>
      </div>
    </footer>-->



	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<!-- Sandip <script src="resources/js/widgets.js"></script> -->
	<script src="resources/js/jquery.js"></script>
	<script src="resources/js/bootstrap-transition.js"></script>
	<script src="resources/js/bootstrap-alert.js"></script>
	<script src="resources/js/bootstrap-modal.js"></script>
	<script src="resources/js/bootstrap-dropdown.js"></script>
	<script src="resources/js/bootstrap-scrollspy.js"></script>
	<script src="resources/js/bootstrap-tab.js"></script>
	<script src="resources/js/bootstrap-tooltip.js"></script>
	<script src="resources/js/bootstrap-popover.js"></script>
	<script src="resources/js/bootstrap-button.js"></script>
	<script src="resources/js/bootstrap-collapse.js"></script>
	<script src="resources/js/bootstrap-carousel.js"></script>
	<script src="resources/js/bootstrap-typeahead.js"></script>
	<script src="resources/js/bootstrap-affix.js"></script>
	<!-- Sandip <script src="resources/js/holder/holder.js"></script> -->
	<!-- Sandip <script src="resources/js/google-code-prettify/prettify.js"></script> -->
	<script src="resources/js/application.js"></script>

	<script type="text/javascript">
		var chartNumber = 1;
		var xAxisLevel;
		var firstChartSelction;
		var chart1Label = null;
		var chart2Label = null;
		var chart1xAxisPoints = new Array();
		var chart1xAxisValues = new Array();
		var chart2xAxisPoints = new Array();
		var chart2xAxisValues = new Array();
		var chart3xAxisPoints = new Array();
		var chart3xAxisValues = new Array();

		function showGenerateButton(element) {
			hideme('chart_1');
			var elementId='#'+element;
			if(validatecmpchart()) {
				showme('btncomprpt');
			}
			getBreadCrumb(element);
			updateDropDownStatus(element);	
		}

		function getBreadCrumbLabelString(parent) {
			parent='#'+parent;
			var label = "";
			$(parent).children().each(function(){
				if($(this).attr('id') != null) {
					if($(this).val() == 'select') {
						return false;
					} else {
						if(label != "") {
							label = label + "-";
						}
						label = label + $(this).val();	
					}												
				}				
    		});	
			return label;
		}

		function getBreadCrumb(element) {
			var elementId='#'+element;
			var parentId=$(elementId).parent().attr('id');	
			var breadCrumbMap = new Object(); // or var map = {};
			var breadCrumbDetailsMap = new Object();
			var suffix = null;
			var tempId;
			if((parentId.split('_').length-1)==2) {
				suffix = parentId.substring(parentId.lastIndexOf('_'));
				parentId = parentId.substring(0,parentId.lastIndexOf('_'));							
			}
			Array.prototype.reverse.call($(elementId).prevAll()).each(function(){
				if($(this).attr('id') != null) {
					if(suffix == null) {
						breadCrumbDetailsMap[$(this).attr('id')]=$(this).val();
					} else {
						tempId=$(this).attr('id');	
						breadCrumbDetailsMap[tempId.substring(0,tempId.lastIndexOf('_'))]=$(this).val();
					}					
				}				
    		});	
			if(suffix == null) {				
				breadCrumbDetailsMap[element]=$(elementId).val();
			} else {			
				breadCrumbDetailsMap[element.substring(0,element.lastIndexOf('_'))]=$(elementId).val();
			}
			breadCrumbMap[parentId]=breadCrumbDetailsMap;
			console.log("JSON-DATA:"+JSON.stringify(breadCrumbMap));
			getBreadCrumbData(elementId,breadCrumbMap);
		}

		function populateDropDown(dropDownId,dataArray) {
			$(dropDownId).children('option:not(:first)').remove();
			$.each(dataArray, function(index, item) {
  				$(dropDownId).append("<option value='"+item+"'>"+item+"</option>");
			});
		}

		function updateDropDownStatus(element) {
			var elementId='#'+element;
			var selectId;
			$(elementId).nextAll().each(function() {
				selectId='#'+$(this).attr('id');
				$(selectId).val($(selectId +" option:first").val());
				if($(this).attr('id') == $(elementId).attr('name')) { 
					enablecombo($(this).attr('id'));
				} else {
					disablecombo($(this).attr('id'));
				}
    		});
		}	

		function getAllBreadCrumbs(includeNextLevel) {
			var dimensionArray = ['DIM_GEOGRAPHY','DIM_TIME_FROM','DIM_TIME_TO'];
			var breadCrumbMap = new Object();
			var parentId;
			var suffix = null;
			var tempId;
			$.each(dimensionArray, function(index, parent) {
				var breadCrumbDetailsMap = new Object();
				suffix = null;
				if((parent.split('_').length-1)==2) {
					suffix = parent.substring(parent.lastIndexOf('_'));					
				}
				parentId = '#' + parent;
				$(parentId).children().each(function(){
					if($(this).val() == 'select') {
						if(includeNextLevel == true && index == 0) {
							if(suffix == null) {
								breadCrumbDetailsMap[$(this).attr('id')] = firstChartSelction;
							} else {
								tempId=$(this).attr('id');	
								breadCrumbDetailsMap[tempId.substring(0,tempId.lastIndexOf('_'))] = firstChartSelction;
							}							
						}
						return false;
					} else if ($(this).attr('id') == null) {		
					} else {
						if(suffix == null) {
							breadCrumbDetailsMap[$(this).attr('id')]=$(this).val();
						} else {
							tempId=$(this).attr('id');	
							breadCrumbDetailsMap[tempId.substring(0,tempId.lastIndexOf('_'))]=$(this).val();
						}
					}
    			});
				breadCrumbMap[parent]=breadCrumbDetailsMap;
    		});	
			return breadCrumbMap;
		}

		function isDifferentDataSelected(breadCrumbMap) {
			var frmSelect = JSON.stringify(breadCrumbMap['DIM_TIME_FROM']);
			var toSelect = JSON.stringify(breadCrumbMap['DIM_TIME_TO']);
			if(frmSelect.split(',').length-1 != toSelect.split(',').length-1) {
				alert("Select DIM_TIME_FROM & DIM_TIME_TO upto same Level");
				
				return false;
			}	
			if(frmSelect == toSelect) {
				alert("Data in DIM_TIME_FROM & DIM_TIME_TO can't be same");
				return false;
			}
			return true;
		}

		function compareReport() {
			var breadCrumbMap = getAllBreadCrumbs(false,null);
			console.log("ReportMap:"+JSON.stringify(breadCrumbMap));
			chartNumber = 1;
			chart1xAxisPoints.length=0;
			chart1xAxisValues.length=0;
			chart2xAxisPoints.length=0;
			chart2xAxisValues.length=0;
			chart3xAxisPoints.length=0;
			chart3xAxisValues.length=0;
			if(isDifferentDataSelected(breadCrumbMap)) {
				getComparisonConsumptionReport(breadCrumbMap,chartNumber,xAxisLevel);
				showme('chart_1');
			}
			
		}

	</script>

</body>
</html>